<template>
  <div class="border-line card">
    <header-title title="配售型保租房建设情况" @fullScreen="handleFullScreen"></header-title>
    <!-- <echarts-view ref="echarts" :options="option" height="360px"></echarts-view> -->
    <div style="display: flex">
      <div class="target-task">
        <div class="construction-icon">
          <!-- <img style="height: 10%; width: 100%" src="@/assets/construction.png" alt="" /> -->
          <svg
            t="1734595030474"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10322"
            width="200"
            height="120"
          >
            <path
              d="M985.31555555 912.49777778h-36.40888888V342.47111111c0-22.94556445-8.83484445-44.41656889-24.87523556-60.45809778S886.51889778 257.13777778 863.57333333 257.13777778H730.45333333V125.15555555c0-22.94556445-8.83484445-44.41656889-24.87523555-60.45809777C689.53656889 48.65706667 668.06556445 39.82222222 645.12 39.82222222H161.56444445c-47.68085333 0-86.47111111 38.28053333-86.47111112 85.33333333v787.34222223H38.68444445c-20.10794667 0-36.40888889 16.30094222-36.4088889 36.40888889s16.30094222 36.40888889 36.4088889 36.40888888h946.6311111c20.10794667 0 36.40888889-16.30094222 36.4088889-36.40888888s-16.30094222-36.40888889-36.4088889-36.40888889zM863.57333333 328.81777778c7.91096889 0 13.65333333 5.74236445 13.65333334 13.65333333v570.02666667H730.45333333V328.81777778h133.12zM146.77333333 125.15555555c0-7.52867555 6.63552-13.65333333 14.79111112-13.65333333h483.55555555c7.91096889 0 13.65333333 5.74236445 13.65333333 13.65333333v787.34222223h-73.95555555V620.65777778c0-59.28618667-48.23381333-107.52-107.52-107.52h-147.91111111c-59.28618667 0-107.52 48.23381333-107.52 107.52V912.49777778h-75.09333334V125.15555555z m366.36444445 787.34222223H293.54666667V620.65777778c0-19.76206222 16.07793778-35.84 35.84-35.84h147.91111111c19.76206222 0 35.84 16.07793778 35.84 35.84V912.49777778z"
              fill="#ffffff"
              p-id="10323"
            ></path>
            <path
              d="M256 294.68444445h291.27111111c20.10794667 0 36.40888889-16.30094222 36.40888889-36.4088889s-16.30094222-36.40888889-36.40888889-36.40888888H256c-20.10794667 0-36.40888889 16.30094222-36.40888889 36.40888888s16.30094222 36.40888889 36.40888889 36.4088889zM256 439.18222222h291.27111111c20.10794667 0 36.40888889-16.30094222 36.40888889-36.40888889s-16.30094222-36.40888889-36.40888889-36.40888888H256c-20.10794667 0-36.40888889 16.30094222-36.40888889 36.40888888s16.30094222 36.40888889 36.40888889 36.40888889z"
              fill="#ffffff"
              p-id="10324"
            ></path>
          </svg>
        </div>
        <div class="target-task-item">
          <div>目标计划:</div>
          <div class="price">5400 套</div>
          <div>已开工:</div>
          <div class="price">3200 套</div>
        </div>
      </div>
      <div class="target-task-line">
        <left3></left3>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle'
import { echartsView } from '@/components'
import left3 from './left3'
import axios from 'axios'
import 'echarts-gl'
export default {
  props: {
    isFullscren: {
      type: Boolean,
      default: false,
    },
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
    left3,
  },
  data() {
    return {
      option: {},
      projectData: [
        { name: '市级统筹（住投公司）公租房', value: 40295 },
        { name: '各区政府（乡镇）自建公租房', value: 4498 },
        { name: '各区企业自建公租房', value: 10131 },
        { name: '市教育局自管教师公租房', value: 6354 },
        { name: '一市三县公租房', value: 15564 },
        { name: '中天共有产权公租房', value: 19440 },
      ],
    }
  },
  mounted() {},
  methods: {
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 300px;
  // margin-left: 10px;
  &-content {
    margin-top: 10px;
    font-size: 16px;
  }
}
.target-task {
  font-size: 18px;
  // text-align: center;
  width: 35%;
  margin: 0 auto;
  margin-right: 50px;
  display: flex;
  margin-top: 62px;
  // line-height: 400px;
  .target-task-item {
    flex: 1;
    padding: 0 150px;
  }
  .price {
    text-align: end;
    font-size: 20px;
    font-weight: 600;
  }
}
.target-task-line {
  height: 260px;
  flex: 1;
}
</style>
